<template>
  <div class="body">
    <img src="@/img/loginbackground.png">
    <el-tabs type="border-card" stretch class="tab" style="font-size: 18px;" tab-position="bottom">
      <el-tab-pane >
        <span slot="label" class="el-tabs-login" @click="resetForm">商户登录</span>
        <div class="login-form">
          <div class="container">
            <el-form :model="accountForm" status-icon :rules="rules" ref="accountForm" label-width="130px"
                     label-position="right">
              <h2 style="margin-bottom:30px;color: #D5637E">商家登录页面</h2>
              <el-form-item label="用户名" prop="accountName" style="padding-top: 5px">
                <el-input type="text" v-model="accountForm.accountName" autocomplete="off" style="width: 300px;position: absolute;left:10px"></el-input>
              </el-form-item>
              <el-form-item label="登录密码" prop="password" style="padding-top: 30px">
                <el-input type="password" v-model="accountForm.password" autocomplete="off" style="width: 300px;position: absolute;left:10px"></el-input>
              </el-form-item>

              <el-form-item label="验证码" prop="inputCode" style="padding-top: 30px">
                <el-input type="text" v-model="accountForm.inputCode" autocomplete="off"
                          style="width: 130px;position: absolute;left: 10px;"></el-input>
                <el-input type="text" v-model="accountForm.codeId" style="display: none"></el-input>
              </el-form-item>

              <img :src="`${accountForm.code}`" @click="flushCode()" style="position:absolute;top: 290px;right: 150px"/>
              <el-form-item style="margin-right: 100px;margin-top: 30px;">
                <el-button  @click="submitForm('accountForm')" style="background-color: #D5637E;color: white">提交</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button @click="resetForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商户加盟" >
        <span slot="label" class="el-tabs-register" @click="resetForm">商户加盟</span>
        <div class="container">
          <el-form :model="accountRegisterForm" status-icon :rules="rules" ref="accountRegisterForm" label-width="130px"
                   label-position="right">
            <h2 style="margin-bottom:30px;color: cornflowerblue">商家加盟页面</h2>
            <el-form-item label="用户名" prop="accountRegisterName" style="padding-top: 5px">
              <el-input type="text" v-model="accountRegisterForm.accountRegisterName" autocomplete="off" style="width: 300px;position: absolute;left:10px"></el-input>
            </el-form-item>
            <el-form-item label="注册密码" prop="passwordRegister" style="padding-top: 30px">
              <el-input type="password" v-model="accountRegisterForm.passwordRegister" autocomplete="off" style="width: 300px;position: absolute;left:10px"></el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="inputCodeRegister" style="padding-top: 30px">
              <el-input type="text" v-model="accountRegisterForm.inputCodeRegister" autocomplete="off"
                        style="width: 130px;position: absolute;left: 10px;"></el-input>
              <el-input type="text" v-model="accountRegisterForm.codeId" style="display: none"></el-input>
            </el-form-item>

            <img :src="`${accountRegisterForm.code}`" @click="flushCode()" style="position:absolute;top: 290px;right: 150px"/>
            <el-form-item style="margin-right: 100px;margin-top: 30px;">
              <el-button  @click="submitRegisterForm('accountRegisterForm')" style="background-color: cornflowerblue;color: white">加盟</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        
      </el-tab-pane>
      
    </el-tabs>
    
  </div>
</template>


<script>

export default {
  name: "LoginView",
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.accountForm.password !== '') {
          this.$refs.accountForm.validateField('validatePassWord');
        }
      }
      callback();
    };
    var validatePassWord = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.accountForm.inputCode !==''){
          this.$refs.accountForm.validateField('validateCode');
        }
      }
      callback();
    };
    var validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        callback();
      }
    };


    var validateRegisterAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
          this.$axios.get('/account/isSameAccount',{
            params:{
              accountName:this.accountRegisterForm.accountRegisterName,
            }
          }).then(response=>{
            if (response.data.code===200){
              callback(this.$message.success(response.data.message));
            }
          })
        if (this.accountRegisterForm.passwordRegister !== '') {
          this.$refs.accountRegisterForm.validateField('validateRegisterPassWord');
        }
      }
      callback();
    };
    var validateRegisterPassWord = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.accountRegisterForm.inputCodeRegister !==''){
          this.$refs.accountRegisterForm.validateField('validateRegisterCode');
        }
      }
      callback();
    };
    var validateRegisterCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        callback();
      }
    };


    return {
      accountForm: {
        accountName: '',
        password: '',
        inputCode:'',
        code: '',
        codeId: '',
      },

      accountRegisterForm: {
        accountRegisterName: '',
        passwordRegister: '',
        inputCodeRegister:'',
        code: '',
        codeId: '',
      },
      
      
      rules: {
        accountName: [
          { validator: validateAccount, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassWord, trigger: 'blur' }
        ],
        inputCode:[
          { validator: validateCode, trigger: 'blur'}
        ],

        accountRegisterName: [
          { validator: validateRegisterAccount, trigger: 'blur' }
        ],
        passwordRegister: [
          { validator: validateRegisterPassWord, trigger: 'blur' }
        ],
        inputCodeRegister:[
          { validator: validateRegisterCode, trigger: 'blur'}
        ],
      }
    };
  },
  
  methods: {
    //登录
    submitForm(accountForm) {
      this.$refs[accountForm].validate((valid) => {
        if (valid) {
          this.$axios.get("/account/loginByCode",{
            params:{
              'accountName': this.accountForm.accountName,
              'password': this.accountForm.password,
              'code': this.accountForm.inputCode,
              'codeId': this.accountForm.codeId,
            }
          }).then((response) => {
            if (response.data.code===200){
              let token=response.headers['token']
              sessionStorage.setItem("token", token);
              sessionStorage.setItem("accountName",this.accountForm.accountName)
              this.$router.push("/index");
              this.$message({
                type: "success",
                message: "登录成功",
              })
            }
          }).catch(() => {
            this.$message({
              type: "error",
              message: "信息有误,请重新输入",
              duration: 2000,
            });
            this.resetForm()
          })
        }else {
          this.$message({
            type: "error",
            message: "表单验证失败，请检查输入",
            duration: 5000,
          });
          this.flushCode();
        }
      });
    },
    //注册
    submitRegisterForm(accountRegisterForm) {
      this.$refs[accountRegisterForm].validate((valid) => {
        if (valid) {
          this.$axios.get("/account/accountRegisterByMerchant",{
            params:{
              'accountName': this.accountRegisterForm.accountRegisterName,
              'password': this.accountRegisterForm.passwordRegister,
              'code': this.accountRegisterForm.inputCodeRegister,
              'codeId': this.accountRegisterForm.codeId,
            }
          }).then((response) => {
            if (response.data.code===200){
              this.$message({
                type: "success",
                message: response.data.message,
              })
              this.resetForm();
            }
          }).catch(() => {
            this.$message({
              type: "error",
              message: "信息有误,请重新输入",
              duration: 2000,
            });
            this.resetForm();
          })
        }else {
          this.$message({
            type: "error",
            message: "表单验证失败，请检查输入",
            duration: 5000,
          });
          this.flushCode();
        }
      });
    },
    resetForm() {
      this.flushCode();
      this.$refs.accountForm.resetFields();
      this.$refs.accountRegisterForm.resetFields();
    },

    
    // 刷新验证码
    flushCode(){
      this.$axios.get("/code/getCode")
          .then(response=>{
             // 刷新图片
            console.log(response)
            if (response.data.code ===200){
               this.accountForm.code = response.data.data.code;
               this.accountForm.codeId = response.data.data.codeId;
               
               this.accountRegisterForm.code = response.data.data.code;
               this.accountRegisterForm.codeId = response.data.data.codeId;
            }
          })
    },
    
  },
  
  created() {
    // 获取初始验证码
    this.flushCode();
  },

}

</script>

<style scoped>
.body{
  
}

.el-tabs-login {
  color: #987a7a;  /* 更改文字颜色 */
  font-size: 17px;
}

.el-tabs-login:hover {
  color: #D5637E;  /* 更改文字颜色 */
  cursor: pointer;  /* 鼠标指针变为手型 */
  font-size: 22px;
  font-style: italic;
}

.el-tabs-register {
  color: #987a7a;  /* 更改文字颜色 */
  font-size: 17px;
}

.el-tabs-register:hover {
  color: cornflowerblue;  /* 更改文字颜色 */
  cursor: pointer;  /* 鼠标指针变为手型 */
  font-size: 22px;
  font-style: italic;
}

.tab{
  position: absolute;
  top:110px;
  left: 59%;
  height: 55%;
  width: 30%;
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
}

</style>